import React, { useEffect, useState, useRef } from 'react'
import { MoreOutlined, PlusOutlined } from '@ant-design/icons'
import {
  Button,
  Col,
  Flex,
  Form,
  Input,
  Row,
  Select,
  Typography,
  Table,
  Modal,
  Switch,
  Space,
  Divider,
  Dropdown
} from 'antd'
import MyDatePicker from '../components/MyDatePicker'
import { useNavigate } from 'react-router-dom'

export default function TagList() {
  const [isShow, setIsShow] = useState(false)
  const [isShow2, setIsShow2] = useState(false)
  const navigate = useNavigate()
  // 保存选择的日期
  const [selectedDateString, setSelectedDateString] = useState(null)
  const [form] = Form.useForm()
  const [form2] = Form.useForm()
  // 创建表单的引用
  const formRef = useRef()
  const formRef2 = useRef()
  // 模态框
  const [isModalOpen01, setIsModalOpen01] = useState(false)
  const [isModalOpen02, setIsModalOpen02] = useState(false)

  // 给我模拟10条标签数据，包含有标签id，标签名称，标签分组，创建时间，内容描述，启用状态
  const [tagList, setTagList] = useState([
    {
      id: 1,
      name: '旅行',
      group: '内容标签',
      createTime: '2023-01-01',
      description: '这是一个关于旅行的标签',
      status: true
    },
    {
      id: 2,
      name: '美食',
      group: '内容标签',
      createTime: '2024-04-21',
      description: '这是一个关于美食的标签',
      status: true
    },
    {
      id: 3,
      name: '购物',
      group: '内容标签',
      createTime: '2023-12-21',
      description: '这是一个关于购物的标签',
      status: false
    },
    {
      id: 4,
      name: '优惠',
      group: '活动标签',
      createTime: '2023-11-05',
      description: '这是一个关于优惠的标签',
      status: true
    },
    {
      id: 5,
      name: '活动',
      group: '活动标签',
      createTime: '2023-06-30',
      description: '这是一个关于活动的标签',
      status: false
    },
    {
      id: 6,
      name: '秒杀',
      group: '活动标签',
      createTime: '2023-01-01',
      description: '这是一个关于秒杀的标签',
      status: true
    }
  ])
  // 用于更新列表
  const [n, setN] = useState(1)

  useEffect(() => {}, [n])

  return (
    <>
      <Row className="info">
        <Col span={24}>
          <Flex justify={'space-between'}>
            <Typography.Title level={3}>信息管理</Typography.Title>
            <Button
              type="primary"
              icon={<PlusOutlined />}
              onClick={() => {
                // setIsModalOpen02(true)
                navigate('/admin/tag/add')
              }}
            >
              新增标签
            </Button>
          </Flex>
        </Col>
      </Row>
      <Row>
        <Col span={3}>
          <div className="container" style={{ marginRight: 0, height: '100%' }}>
            <Space direction="vertical">
              <Button
                type="primary"
                block
                onClick={() => {
                  setIsModalOpen02(true)
                }}
              >
                新增分类
              </Button>
              <Input.Search placeholder="请输入搜索关键字" />
              <Flex
                justify={'space-between'}
                style={{
                  padding: '5px 10px',
                  borderRadius: 5,
                  backgroundColor: '#EEE',
                  position: 'relative'
                }}
              >
                <span
                  style={{ cursor: 'pointer', color: '#666' }}
                  onClick={() => {
                    setIsShow(!isShow)
                  }}
                >
                  用户标签
                </span>
                <PlusOutlined
                  onClick={() => setIsModalOpen01(true)}
                  style={{
                    marginLeft: 24,
                    fontSize: 10,
                    position: 'absolute',
                    right: 30,
                    top: 9
                  }}
                />
                <Dropdown
                  trigger={['click']}
                  menu={{
                    items: [
                      {
                        label: '重命名',
                        key: 'rename'
                      },
                      {
                        label: '删除',
                        key: 'delete'
                      }
                    ]
                  }}
                >
                  <MoreOutlined />
                </Dropdown>
              </Flex>
              <Flex
                vertical
                style={{
                  paddingLeft: '10px',
                  lineHeight: '22px',
                  display: !isShow && 'none'
                }}
              >
                <span>旅游</span>
                <span>美食</span>
                <span>娱乐</span>
              </Flex>
              <Flex
                justify={'space-between'}
                style={{
                  padding: '5px 10px',
                  borderRadius: 5,
                  backgroundColor: '#EEE',
                  position: 'relative'
                }}
              >
                <span
                  style={{ cursor: 'pointer', color: '#666' }}
                  onClick={() => {
                    setIsShow2(!isShow2)
                  }}
                >
                  内容标签
                </span>
                <PlusOutlined
                  onClick={() => setIsModalOpen01(true)}
                  style={{
                    marginLeft: 24,
                    fontSize: 10,
                    position: 'absolute',
                    right: 30,
                    top: 9
                  }}
                />
                <Dropdown
                  trigger={['click']}
                  menu={{
                    items: [
                      {
                        label: '重命名',
                        key: 'rename'
                      },
                      {
                        label: '删除',
                        key: 'delete'
                      }
                    ]
                  }}
                >
                  <MoreOutlined />
                </Dropdown>
              </Flex>
              <Flex
                vertical
                style={{
                  paddingLeft: '10px',
                  lineHeight: '22px',
                  display: !isShow2 && 'none'
                }}
              >
                <span>铁公鸡</span>
                <span>羊毛党</span>
                <span>购物狂</span>
              </Flex>
            </Space>
          </div>
        </Col>
        <Col span={21}>
          <Row className="container">
            <Col span={24}>
              <Form layout="inline" onFinish={() => {}}>
                <Form.Item label="标签名称：" name="storeName">
                  <Input />
                </Form.Item>
                <Form.Item label="启用状态：" name="storeAddress">
                  <Select
                    placeholder="状态选择"
                    options={[
                      {
                        value: '',
                        label: '全部'
                      }
                    ]}
                  />
                </Form.Item>
                <Form.Item label="计算方式：" name="calc">
                  <Select
                    placeholder="方式选择"
                    options={[
                      {
                        value: '',
                        label: '全部'
                      }
                    ]}
                  />
                </Form.Item>
                <Form.Item label="更新时间">
                  <MyDatePicker
                    selectedDateString={selectedDateString}
                    setSelectedDateString={setSelectedDateString}
                  />
                </Form.Item>

                <Form.Item>
                  <Button type="default" htmlType="reset">
                    重置
                  </Button>
                </Form.Item>
                <Form.Item>
                  <Button type="primary" htmlType="submit">
                    查询
                  </Button>
                </Form.Item>
              </Form>
            </Col>
          </Row>
          <Row className="container">
            <Col span={24}>
              <Typography.Paragraph style={{ fontSize: 16 }}>
                标签列表
              </Typography.Paragraph>
            </Col>
            <Col span={24}>
              <Table
                rowKey="id"
                dataSource={tagList}
                columns={[
                  {
                    title: '标签ID',
                    dataIndex: 'id',
                    key: 'id'
                  },
                  {
                    title: '标签名称',
                    dataIndex: 'name',
                    key: 'name'
                  },
                  {
                    title: '标签分组',
                    dataIndex: 'group',
                    key: 'group'
                  },
                  {
                    title: '创建时间',
                    dataIndex: 'createTime',
                    key: 'createTime'
                  },
                  {
                    title: '内容描述',
                    dataIndex: 'description',
                    key: 'description'
                  },
                  {
                    title: '状态',
                    dataIndex: 'status',
                    key: 'status',
                    render: (_, record) => {
                      return <Switch defaultChecked checked={record.status} />
                    }
                  },
                  {
                    title: '操作',
                    dataIndex: 'op',
                    key: 'op',
                    align: 'center',
                    render: (_, record) => {
                      return (
                        <span className="op">
                          <a onClick={() => {}}>编辑</a>
                          <a style={{ marginLeft: 10 }}>删除</a>
                        </span>
                      )
                    }
                  }
                ]}
              />
            </Col>
          </Row>
        </Col>
      </Row>

      <Modal
        title="新增标签分组"
        open={isModalOpen01}
        onOk={() => {
          formRef.current.submit()
          // navigate('/admin/tag/add')
        }}
        onCancel={() => setIsModalOpen01(false)}
        maskClosable={false}
        width={500}
        destroyOnClose
      >
        <Divider />
        <Form
          form={form}
          ref={formRef}
          onFinish={() => {
            setIsModalOpen01(false)
          }}
          preserve={false}
        >
          <Form.Item
            label="标签分组"
            name="tagName"
            rules={[
              {
                required: true,
                message: '请输入标签分组'
              }
            ]}
          >
            <Input placeholder="请输入标签分组名称" />
          </Form.Item>
        </Form>
      </Modal>
      <Modal
        title="新增分类"
        open={isModalOpen02}
        onOk={() => {
          setIsModalOpen02(false)
          // formRef2.current.submit()
        }}
        onCancel={() => setIsModalOpen02(false)}
        maskClosable={false}
        width={500}
        destroyOnClose
      >
        <Divider />
        <Form.Item
          label="标签分类"
          ref={formRef2}
          form={form2}
          name="tagName"
          rules={[
            {
              required: true,
              message: '请输入标签分类'
            }
          ]}
        >
          <Input placeholder="请输入标签分类名称" />
        </Form.Item>
      </Modal>
    </>
  )
}
